
<!-- Horizontal Form -->
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加用户</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="usernameId" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="usernameId">
                </div>
            </div>
            <div class="form-group" id="pwdDiv">
                <label for="passwordId" class="col-sm-2 control-label">密码</label>

                <div class="col-sm-10">
                    <input type="password" class="form-control"  id="passwordId">
                </div>
            </div>

            <div class="form-group">
                <label for="deptId" class="col-sm-2 control-label">所属部门</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control load-sys-dept" readonly="readonly" id="deptId" placeholder="上级部门">
                </div>
            </div>

            <div class="form-group">
                <label for="emailId" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control"  id="emailId">
                </div>
            </div>
            <div class="form-group">
                <label for="phoneId" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control"  id="phoneId">
                </div>
            </div>
            <div class="form-group">
                <label for="rolesId" class="col-sm-2 control-label">角色</label>
                <div class="col-sm-10" id="rolesId">

                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">Cancel</button>
            <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
    </form>
    <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="treeLayer" type="page" times="2" showtime="0" contype="object"
         style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
        <div class="layui-layer-title" style="cursor: move;">选择部门</div>
        <div class="layui-layer-content" style="height: 358px;">
            <div style="padding: 10px;" class="layui-layer-wrap">
                <ul id="zTreeId" class="ztree"></ul>    <!-- 动态加载树 -->
            </div>
        </div>
        <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0 btn-confirm">确定</a>
            <a class="layui-layer-btn1 btn-cancel">取消</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js"></script>
<script type="text/javascript">

    var zTree;
    //初始化zTree时会用到
    var setting = {
        data : {
            simpleData : {
                enable : true,
                idKey : "id",  //节点数据中保存唯一标识的属性名称
                pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
                rootPId : null  //根节点id
            }//json 格式javascript对象
        }
    }//json 格式的javascript对象
    $(function () {
        //页面加载完成后加载角色信息并初始化页面
        doLoadRoles();
        //所属部门ZTree事件绑定
        $(".form-horizontal").on("click",".load-sys-dept",doLoadZTreeNodes);
        //按钮绑定事件
        $(".box-footer")
            .on("click",".btn-cancel",doCancel)
            .on("click",".btn-save",doSaveOrUpdate);
        //ZTree树按钮绑定点击事件
        $("#treeLayer")
        .on("click",".btn-confirm",doConfirm)
        .on("click",".btn-cancel",doHideTree)
    });
    //确定按钮事件处理
    function doConfirm(){
        //1.获取选中的记录（id,name）
        var selectedNodes=zTree.getSelectedNodes();
        var node=selectedNodes[0];
        //2.将id和name填充或绑定在具体的对象上
        $("#deptId").val(node.name);
        $("#deptId").data("deptId",node.id);
        //3.隐藏ZTree对应的div
        doHideTree();
    }
    //cancel按钮事件处理
    function doHideTree(){
        $("#treeLayer").css("display","none");

    }

    function doSaveOrUpdate() {
        //获取rowData数据
        var rowData=$("#mainContentId").data("rowData");
        //请求的参数(获取表单的数据)
        var params=doGetEditFormData();
        if(rowData)params.id=rowData.user.id;
        //console.log(params);
        //请求的url
        var insertUrl = "user/doSaveObject";
        var updateUrl="user/doUpdateObject";
        var url=rowData?updateUrl:insertUrl;
        //发送异步请求
        $.post(url,params,function (result) {
            if (result.state==1){
                alert(result.message);
                //回到列表页面
                doCancel();
            }else {
                alert(result.message);
            }
        })
    }
    //获取表单数据
    function doGetEditFormData() {
        //获取用户输入的数据
        var params={
            username:$("#usernameId").val(),
            password:$("#passwordId").val(),
            email:$("#emailId").val(),
            mobile:$("#phoneId").val(),
            deptId:$("#deptId").data("deptId"),
        }
        //获取选择的角色信息
        var roleIds=new Array();
        $("#rolesId input[name='roleId']").each(function () {
            if ($(this).prop("checked")){
                //将选中的单选框存储在数组中i
                roleIds.push($(this).val());
            }
        });
        params.roleIds=roleIds.toString();
        return params;
    }
    function doCancel() {
        $("#mainContentId").removeData("rowData");
        $("#mainContentId").load("user/user_list");
    }
    function doLoadZTreeNodes() {
        var url = "dept/doLoadZTreeNodes";
        $("#treeLayer").css("display","block");
        $.getJSON(url,function (result) {
            if (result.state==1){
                zTree=$.fn.zTree.init($("#zTreeId"),setting,result.data);
            }else {
                alert(result.message);
            }
        })
    }
    //页面加载完成，加载角色信息
    function doLoadRoles() {
        var url="role/doFindRoles";
        //发送异步请求
        $.getJSON(url,function (result) {
            if (result.state==1){
                //console.log(result.data);
                //初始化信息信息
                doInitPageRoles(result.data);
                //初始化修改页面用户数据信息
                //doInitFormData(result.data);
                doInitFormData();
            }else {
                alert(result.message);
            }
        })
    }
    function doInitFormData(){
        //1.获取div容器中绑定的数据
        var data=$("#mainContentId").data("rowData");
        //2.判定是否有绑定数据
        if (!data)return;
        $("#pwdDiv").remove();
        //3.假如有数据，则将数据取出并填充在页面
        //3.1初始化用户数据信息
        $("#usernameId").val(data.user.username);
        //获取部门名称
        $("#deptId").val(data.user.sysDept?data.user.sysDept.name:'');
        //获取部门id
        $("#deptId").val(data.user.sysDept?data.user.sysDept.id:'');
        $("#emailId").val(data.user.email);
        $("#phoneId").val(data.user.mobile);
        //3.2获取用户对应角色信息
        var ids=data.roleIds;
        for(var i in ids) {
            $("#rolesId input[value='" + ids[i] + "']").prop("checked", true);

        }
    }
    function doInitPageRoles(data) {
        //1.获取角色要显示的位置对象
        var div=$("#rolesId");
        //2.迭代数据，将数据追加到显示的位置上
        var input="<input type='checkbox' name='roleId' value='[id]'/>[name]"
        for (var i in data){
            var newInput = input.replace("[id]",data[i].id).replace("[name]",data[i].name);
            div.append(newInput);
        }
    }
</script>






